import React from 'react';
import { observer } from 'mobx-react';
import { WeaSelect, WeaLocaleProvider, WeaError } from 'ecCom';
// import { selectFilterOption } from '../../util/ModeUtil';
import _ from 'lodash';

const getLabel = WeaLocaleProvider.getLabel;
const formatMultiLang = WeaLocaleProvider.formatMultiLang;
import HighSeasConditionTarget from './HighSeasConditionTarget';

@observer
export default class ConditionEdit extends React.Component {
  constructor(props) {
    super(props);
    const { itemdata } = this.props;
    this.state = {
      tempdata: { ...itemdata }, // 用临时数据，进行临时修改，点击确定是再修改真正的数据
      fieldRecord: {},
    };
  }

  getSelectedObj(key, array) {
    let obj;
    for (let i = 0; i < array.length; i++) {
      if (key == array[i].key) {
        obj = array[i];
        break;
      }
    }
    return obj;
  }

	/**
	 * relationtype关系类型，根据relationtype获取option
	 * compareopion为option的值
	 */
	getCompareopionLabel=(relationtype, compareopion, fieldtype) => {
	  const { store } = this.props;
	  const options = store.getRelationArr(relationtype, fieldtype);
	  let compareopionlabel = '';
	  const selectObj = this.getSelectedObj(compareopion, options);
	  if (selectObj) {
	    compareopionlabel = selectObj.showname;
	  }
	  return compareopionlabel;
	}

	getValue4EditObj=() => {
	  let { fieldRecord, tempdata } = this.state;
	  const { fieldvalue, fieldtext } = tempdata;
	  const { fieldname, fieldid, fieldhtmltype, type, fielddbtype, relationtype, valueshowtype, showname, tablename } = fieldRecord;
	  const fieldlabel = showname;
	  const valetype = valueshowtype;
	  const htmltype = fieldhtmltype; // 大类型
	  const fieldtype = type;	// 小类型
	  const dbtype = fielddbtype;// 数据库类型
	  //
	  let { compareopion } = fieldRecord;
	  const compareopionlabel = this.getCompareopionLabel(relationtype, compareopion, fieldtype);
	  if (dbtype == 'text' || dbtype == 'clob' || (fieldtype == '162' || fieldtype == '257')) {
	    compareopion = '100';
	  }
	  // value span 取值
	  const value = fieldvalue;
	  let text = fieldvalue;
	  if (valetype == 4) { // 浏览框
	    text = fieldtext;
	  }

	  // 组装字符串 显示和后台所需
	  const hiddenarea = {
	    fieldid,
	    fieldname,
	    fieldlabel,
	    htmltype,
	    fieldtype,
	    fielddbtype,
	    compareopion: `${compareopion}`,
	    compareopionlabel,
	    fieldvalue: value,
	    fieldtext: text,
	    relationtype,
	    valetype,
	    tablename,
	  };
	  tempdata = { ...tempdata, ...hiddenarea };
	  this.setState({
	    tempdata,
	  });
	  return hiddenarea;
	}

	changeEditValue=(key, value) => {
	  let { tempdata } = this.state;
	  const { store } = this.props;
	  const { conditionInfo } = store;
	  const { fieldOptions } = conditionInfo;
	  const { type } = conditionInfo;
	  if (key == 'fieldid') {
	    tempdata.fieldvalue = '';
	    tempdata.fieldtext = '';
	    if (value != '') {
	      for (let i = 0; i < fieldOptions.length; i++) {
	        if (fieldOptions[i].key == value) {
	          const r = fieldOptions[i];
	          if (r.fieldhtmltype == '4') { // checkbox
	            tempdata.fieldvalue = '0';
	          }

	          this.setState({
	            fieldRecord: { ...fieldOptions[i], compareopion: 4, fieldid: value },
	          }, this.getValue4EditObj);
	          break;
	        }
	      }
	    } else {
	      tempdata[key] = value;
	      this.setState({
	        tempdata,
	      });
	    }
	  } else if (key == 'compareopion') {
	    const { relationtype } = tempdata;
	    const compareopionlabel = this.getCompareopionLabel(relationtype, value, type);
	    let fieldRecord = this.state;
	    fieldRecord = { ...fieldRecord, compareopion: value, compareopionlabel };
	    tempdata = { ...tempdata, compareopion: value, compareopionlabel };
	    this.setState({
	      tempdata,
	      fieldRecord,
	    });
	  }
	}

	changeModified = () => {
	  const { store } = this.props;
	  store.ismodified = '1';
	}

	saveEdit=() => {
	  const { store } = this.props;
	  const { refObj } = store;
	  const { tempdata } = this.state;
	  const { itemdata } = this.props;
	  const { valetype, fieldid, fieldvalue, fieldtext, compareopion } = tempdata;
	  if (_.trim(formatMultiLang(fieldvalue)) == '') {
	    // if(formatMultiLang(fieldvalue)==""){
	    for (const key in refObj) {
	      if (key == 'edit_mbzd') {
	        const domkeyRef = refObj[key];
	        domkeyRef.showError();
	        return;
	      }
	    }
	    // message.error(getLabel(15642,"目标字段不能为空"));
	    // return ;
	  }

	  let text = fieldtext || fieldvalue;
	  const { conditionField } = store;
	  if (valetype == 5) { // 下拉框
	    const { selectOption } = conditionField;
	    const arr = selectOption[`option_${fieldid}`];
	    const selectObj = this.getSelectedObj(fieldvalue, arr);
	    if (selectObj) {
	      text = selectObj.showname;
	    }
	  }
	  itemdata.compareopion = tempdata.compareopion;
	  itemdata.compareopionlabel = tempdata.compareopionlabel;
	  itemdata.fielddbtype = tempdata.fielddbtype;
	  itemdata.fieldid = fieldid;
	  itemdata.fieldlabel = tempdata.fieldlabel;

	  itemdata.fieldname = tempdata.fieldname;
	  itemdata.fieldtext = text;
	  itemdata.fieldtype = tempdata.fieldtype;
	  if (compareopion == '10' || compareopion == '11') {
	    itemdata.fieldvalue = tempdata.fieldvalue;
	    itemdata.fieldOldvalue = tempdata.fieldOldvalue;
	  } else {
	    itemdata.fieldvalue = fieldvalue;
	  }
	  itemdata.htmltype = tempdata.htmltype;

	  itemdata.fieldtype = tempdata.fieldtype;
	  itemdata.relationtype = tempdata.relationtype;
	  itemdata.tablename = tempdata.tablename;
	  itemdata.valetype = valetype;
	  this.changeModified();
	  this.cancelEdit();
	}

	cancelEdit=() => {
	  const { itemdata, cancelBackFun } = this.props;
	  itemdata.isEdit = 0;
	  cancelBackFun(itemdata);
	}

	getEditItem =() => {
	  const { tempdata } = this.state;
	  const { store } = this.props;
	  const { conditionInfo, conditionField } = store;
	  const { fieldOptions } = conditionInfo;
	  const { fieldid, compareopion, relationtype, fieldtype } = tempdata;
	  const relation = `${compareopion}`;
	  // if(compareopion==100){
	  //     relation = "4";
	  // }
	  const { browserOption } = conditionField;
	  const options = store.getRelationArr(relationtype, fieldtype);
	  return (<div className="wev-crm-highseas-condition-editdiv">
  <div className="wev-cube-field" style={{ width: 175, float: 'left' }}>
  <WeaSelect
  ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@4hl19s`}
	        showSearch
  filterOption={(inputValue, option) => this.selectFilterOption(inputValue, option)}
	        options={fieldOptions}
  style={{ width: 160 }}
  value={fieldid}
  viewAttr={3}
  onChange={v => this.changeEditValue('fieldid', v)}
	      />
	    </div>
  {fieldid && fieldid > 0 &&
  <div className="wev-cube-field" style={{ width: 135, float: 'left' }}>
    <WeaSelect
      ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@g7iwaj`}
      key={options.length + relation}
      value={relation}
      options={options}
      style={{ width: 120 }}
      viewAttr={2}
      onChange={v => this.changeEditValue('compareopion', v)}
    />
  </div>
	    }
	    {fieldid && fieldid > 0 &&
  <div className="wev-cube-field" style={{ width: 200, float: 'left' }}>
    {/* <WeaError tipPosition='bottom' error={'"'+getLabel(15620,"目标字段") + '"' + getLabel(21423, "未填写")}
                                style={{ width: "100%" }}
                                // ref={ref => { store.refObj["edit_mbzd"] = ref; }}
                    > */}
    <HighSeasConditionTarget ecId={`${this && this.props && this.props.ecId || ''}_HighSeasConditionTarget@hl7q82`} {...this.props} ctype="edit" itemdata={tempdata} />
    {/* </WeaError> */}
  </div>
	    }
	    {browserOption && fieldid && fieldid > 0 &&
  <div className="wev-cube-field" onClick={() => this.saveEdit()} title={getLabel(826, '确定')} style={{ width: 29, height: 29, float: 'left' }}>
    <div className="operbtn operbtn_ok" />
  </div>
	    }
  {browserOption &&
  <div className="wev-cube-field" onClick={() => this.cancelEdit()} title={getLabel(201, '取消')} style={{ width: 29, height: 29, float: 'left' }}>
    <div className="operbtn operbtn_cancel" />
  </div>
	    }
	  </div>);
	}

     selectFilterOption = (inputValue, option) => {
       if (inputValue != '') {
         const { children } = option.props;
         if (children) {
           if ((typeof children) === 'string') {
             return children.toLowerCase().indexOf(inputValue.toLowerCase()) != -1;
           } else if ((typeof children) === 'object' && children.length > 0) {
             const childrenNew = children[0].props.children;
             if (childrenNew) {
               return childrenNew.toLowerCase().indexOf(inputValue.toLowerCase()) != -1;
             }
             return false;
           }
           const childrenNew = children.props.children;
           if (childrenNew) {
             return childrenNew.toLowerCase().indexOf(inputValue.toLowerCase()) != -1;
           }
           return false;
         }
         return false;
       }
       return true;
     }

     render() {
       return (this.getEditItem());
       // return <div>ddd</div>
     }
}

